<template>
	<view>
		<view class="flex justify-between align-center mt-10 border-bottom" v-for="(item, index) in list" :key="index">
			<view class="font-sm">{{ item }}</view>
			<uv-button type="warning" size="small" text="删除" @click="deleteFn(item)"></uv-button>
		</view>
	</view>
</template>

<script>
export default {
	name: 'List',
	props: {
		data: {
			type: String,
			default: ''
		},
		footer: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			list: []
		};
	},
	created() {
		if (this.data) {
			const arr = this.data.split(',');
			this.list = arr;
		}
	},
	watch: {
		data(newVal) {
			const arr = newVal.split(',');
			this.list = arr;
		}
	},
	methods: {
		deleteFn(value) {
			const data = this.list.filter((item) => item != value);
			const dataNew = data && data.join(',');
			this.$emit('updateList', dataNew);
		}
	}
};
</script>

<style scoped></style>
